Xceed DataGrid for WPF v7.2 Documentation
Styling Elements

Welcome to Xceed DataGrid, Editors, and 3D Views for WPF v7.2 > Xceed DataGrid for WPF > Code Snippets > Styling Elements

The following page provides a list of examples that demonstrate how to style various elements. For more styling-related information, refer to the Styles topic.

All examples in this topic assume that the grid is bound to the Orders table of the Northwind database, unless stated otherwise.

Styling data cells

The following example demonstrates how to change the foreground and background of the current cell.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <Style TargetType="{x:Type xcdg:DataCell}">
      <Setter Property="CurrentForeground">
        <Setter.Value>
          <SolidColorBrush Color="Yellow"/>
        </Setter.Value>
        </Setter>
          <Setter Property="CurrentBackground">
            <Setter.Value>
          <SolidColorBrush Color="Orange"/>
        </Setter.Value>
      </Setter>
    </Style>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                    Source="{Binding Source={x:Static Application.Current},
                                                      Path=Orders}"/>
   </Grid.Resources>
   <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>

Styling data cells through triggers

The following example demonstrates how to change the background of all cells of a specific column.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <Style TargetType="{x:Type xcdg:DataCell }">
      <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=FieldName}"
                     Value="OrderID">
          <Setter Property="Background"
                  Value="DodgerBlue" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current}, Path=Orders}"/>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
 </Grid>

 

The following example demonstrates how to change the background of a cell with a specific value.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <Style TargetType="{x:Type xcdg:DataCell }">
      <Style.Triggers>
        <MultiDataTrigger>
          <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=ParentColumn.FieldName}"
                       Value="CustomerID" />
            <Condition Binding="{Binding Path=CustomerID}"
                       Value="VINET" />
          </MultiDataTrigger.Conditions>
          <Setter Property="Background"
                  Value="DarkOrange" />
        </MultiDataTrigger>
      </Style.Triggers>
    </Style>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current}, Path=Orders}"/>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
 </Grid>

 

The following example demonstrates how to change the background of a cell that has been edited but which value has not yet been committed to the data source item.  Note that the Cell.IsDirty property will be true only until the row is committed if DataGridControl.UpdateSourceTigger is set to RowEndingEdit – which is the default value of this property.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <Style TargetType="{x:Type xcdg:DataCell }">
      <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsDirty}"
                     Value="True">
          <Setter Property="Background"
                  Value="DeepSkyBlue" />
        </DataTrigger>
      </Style.Triggers>
    </Style>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current}, Path=Orders}"/>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
 </Grid>

 

Alternating data-row styles

The following example demonstrates how to alternate the appearance of data row styles using the IndexToOddConverter.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>


    <xcdg:IndexToOddConverter x:Key="rowIndexConverter"/>   

    <Style TargetType="{x:Type xcdg:DataRow}">
      <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},
                                       Path=(xcdg:DataGridVirtualizingPanel.ItemIndex),
                                       Converter={StaticResource rowIndexConverter}}"
                               Value="True">
          <Setter Property="Background">
            <Setter.Value>
              <SolidColorBrush Color="LightGray"
                               Opacity="0.1"/>
            </Setter.Value>
          </Setter>
        </DataTrigger>
      </Style.Triggers>
    </Style> 
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                   Source="{Binding Source={x:Static Application.Current},
                                                    Path=Orders}"/>
  </Grid.Resources>

  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}">
  </xcdg:DataGridControl>
</Grid>

As of version 3.1, it is also possible to enable alternate row styles, by setting the IsAlternatingRowStyleEnabled property, which is defined in the TableView class, to true. 

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
     <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                        Source="{Binding Source={x:Static Application.Current}, Path=Orders}" />
    <Style TargetType="{x:Type xcdg:TableView}">
       <Setter Property="IsAlternatingRowStyleEnabled"
               Value="True" />
    </Style> 
  </Grid.Resources>

  <xcdg:DataGridControl ItemsSource="{Binding Source={StaticResource cvs_orders}}"
                        AutoCreateDetailConfigurations="True">
     <xcdg:DataGridControl.DefaultDetailConfiguration>
       <xcdg:DefaultDetailConfiguration xcdg:TableView.IsAlternatingRowStyleEnabled="False"/> 
     </xcdg:DataGridControl.DefaultDetailConfiguration>
  </xcdg:DataGridControl>
</Grid>

Styling a fixed-column splitter

The following example demonstrates how to change the style of the data rows' fixed-column splitter.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                    Source="{Binding Source={x:Static Application.Current},
                                                      Path=Orders}"/>
     
     <Style x:Key="basicSplitter_style" TargetType="{x:Type xcdg:FixedColumnSplitter}">
       <Setter Property="Background" Value="LightBlue"/>                              
     </Style>           
                                                                   
     <Style TargetType="{x:Type xcdg:DataRow}">
       <Setter Property="xcdg:TableView.FixedColumnSplitterStyle"
               Value="{StaticResource basicSplitter_style}"/>
     </Style>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}">
    <xcdg:DataGridControl.Columns>
      <xcdg:Column FieldName="ShipCountry" VisiblePosition="0"/>
      <xcdg:Column FieldName="ShipCity" VisiblePosition="1"/>
    </xcdg:DataGridControl.Columns>
    <xcdg:DataGridControl.View >       
      <xcdg:TableView FixedColumnCount="2"/>       
    </xcdg:DataGridControl.View>
  </xcdg:DataGridControl>
</Grid>

Changing the background color of a data row

The following example demonstrates how to changed the background color of a DataRow according to the value of one of its cells using DataTriggers.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current},
                                                        Path=Orders}"/>
   <Style TargetType="{x:Type xcdg:DataRow}">
     <Style.Triggers>
       <DataTrigger Binding="{Binding Path=[EmployeeID]}" Value="1">
         <Setter Property="Background" Value="Pink"/>
       </DataTrigger>
       <DataTrigger Binding="{Binding Path=[EmployeeID]}" Value="3">
         <Setter Property="Background" Value="Blue"/>
       </DataTrigger>
     </Style.Triggers>
   </Style>
 </Grid.Resources>
<xcdg:DataGridControl x:Name="OrdersGrid"
                        ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>

Forcing items in the fixed headers to occupy all the available width

The following example demonstrates how to force the GroupByControl and ColumnManagerRow contained in a grid's fixed header section to occupy all the available width.

By default, items in the fixed header and footer sections will only span across the width occupied by the columns.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current},
                                       Path=Orders}"
                                       AutoCreateItemProperties="False">
      <xcdg:DataGridCollectionViewSource.ItemProperties>
        <xcdg:DataGridItemProperty Name="ShipCountry"/>
        <xcdg:DataGridItemProperty Name="ShipCity"/>
        </xcdg:DataGridCollectionViewSource.ItemProperties>
      </xcdg:DataGridCollectionViewSource>
     <Style TargetType="{x:Type xcdg:GroupHeaderControl}">
       <Setter Property="MinWidth"
               Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}},
                               Path=ActualWidth}"/>
     </Style>
     <Style TargetType="{x:Type xcdg:ColumnManagerRow}">
       <Setter Property="MinWidth"
               Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type ScrollContentPresenter}},
                               Path=ActualWidth}"/>
     </Style>
    </Grid.Resources>
    <xcdg:DataGridControl x:Name="OrdersGrid"
                         ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
</Grid>

Styling row selectors

The following example demonstrates how to display a row's visual index in its corresponding row selector by creating a style targeting the RowSelector type that displays the value of its ItemIndex property as its content. The style is then assigned to the RowSelector.RowSelectorStyle attached property, which is set by the implicit DataRow style.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                       Source="{Binding Source={x:Static Application.Current},
                                                        Path=Orders}" />
    <Style x:Key="itemIndexSelectorStyle"
           TargetType="{x:Type xcdg:RowSelector}">
      <Setter Property="Content"
              Value="{Binding RelativeSource={RelativeSource Self}, Path=ItemIndex}"/>
    </Style>
    <Style TargetType="{x:Type xcdg:DataRow}">
      <Setter Property="xcdg:RowSelector.RowSelectorStyle"
              Value="{StaticResource itemIndexSelectorStyle}" />
    </Style>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                            ItemsSource="{Binding Source={StaticResource cvs_orders}}" />
</Grid>

Providing a detail configuration item-container style

The following example demonstrates how to provide an item-container style for the Employee_Orders data relation.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
      xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
  <Grid.Resources>
    <xcdg:DataGridCollectionViewSource x:Key="cvs_employees"
                                    Source="{Binding Source={x:Static Application.Current},
                                              Path=Employees}"/>           
   
    <xcdg:IndexToOddConverter x:Key="rowIndexConverter" />
   
    <Style x:Key="alternatingDataRowStyle" TargetType="{x:Type xcdg:DataRow}">
      <Style.Triggers>
         <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self},
                                 Path=(xcdg:DataGridVirtualizingPanel.ItemIndex),
                                 Converter={StaticResource rowIndexConverter}}"
                      Value="True">
            <Setter Property="Background" Value="AliceBlue"/>                    
         </DataTrigger>
      </Style.Triggers>
    </Style>
  </Grid.Resources>
 
  <xcdg:DataGridControl x:Name="EmployeesGrid"
                  ItemsSource="{Binding Source={StaticResource cvs_employees}}"
                  AutoCreateDetailConfigurations="True">   
    <xcdg:DataGridControl.DetailConfigurations>
      <xcdg:DetailConfiguration RelationName="Employee_Orders"
                                Title="Employee Orders"
                                ItemContainerStyle="{StaticResource alternatingDataRowStyle}"/>                        
    </xcdg:DataGridControl.DetailConfigurations>      
  </xcdg:DataGridControl>
</Grid>

Changing the no-group content

The following example demonstrates how to provide an implicit style targeting the HierarchicalGroupByControl class that changes the value of the NoGroupContent property to display "Hello World" rather than "Drag a column header here to group by that column."

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
 xmlns:local="clr-namespace:Xceed.Wpf.Documentation">
  <Grid.Resources>
   <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                      Source="{Binding Source={x:Static Application.Current},
                                                Path=Orders}"/>
   <Style TargetType="{x:Type xcdg:HierarchicalGroupByControl}">
      <Setter Property="NoGroupContent"
              Value="Hello World" />
   </Style>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                      ItemsSource="{Binding Source={StaticResource cvs_orders}}"/>
 
</Grid>

Centering column titles

The following example demonstrates how to center the column titles that are displayed as the content of the corresponding column-manager cells by creating an implicit style that targets the ColumnManagerCell data type and that sets the HorizontalContentAlignment and VerticalContentAlignment properties to Center.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
  <Grid.Resources>
     <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                        Source="{Binding Source={x:Static Application.Current},
                                                  Path=Orders}" />
     <Style TargetType="{x:Type xcdg:ColumnManagerCell}">
        <Setter Property="HorizontalContentAlignment"
                Value="Center"/>
        <Setter Property="VerticalContentAlignment"
                Value="Center" />
     </Style>
  </Grid.Resources>
  <xcdg:DataGridControl x:Name="OrdersGrid"
                      ItemsSource="{Binding Source={StaticResource cvs_orders}}" />
</Grid>

Applying a card background brush

The following example demonstrates how to apply one of the custom background brushes (provided by Xceed) cards (i.e., data rows) by creating an implicit style that targets DataRow and that sets the background property.

XAML
Copy Code 
<Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
    <Grid.Resources>
       <xcdg:DataGridCollectionViewSource x:Key="cvs_products"
                                    Source="{Binding Source={x:Static Application.Current}, Path=ProductsTable}"/>
      <Style TargetType="{x:Type xcdg:DataRow}">
         <Setter Property="Background"
                 Value="{x:Static xcdg:CardBackgroundBrushes.Retro}"/>
      </Style>  
    </Grid.Resources>
    <xcdg:DataGridControl x:Name="ProductsGrid"
                          ItemsSource="{Binding Source={StaticResource cvs_products}}">
       <xcdg:DataGridControl.Columns>
          <xcdg:Column FieldName="ProductName"
                       IsMainColumn="True"/>
       </xcdg:DataGridControl.Columns>
       <xcdg:DataGridControl.View>
          <xcdg:CardflowView3D CardHeightToViewportRatio="0.5">
             <xcdg:CardflowView3D.Theme>
                <xcdg:ChameleonTheme/>
             </xcdg:CardflowView3D.Theme>
          </xcdg:CardflowView3D>           
       </xcdg:DataGridControl.View>
    </xcdg:DataGridControl>
 </Grid>
 

 

 

Copyright Xceed Software Inc

Send Feedback